import { useState, useCallback } from "react";

import Child from "./Child";

function App() {
  const [count, setCount] = useState(0);

  const [num, setNum] = useState(0);
  /*
    useCallback: 
      1. 用来缓存函数的
      2. 当依赖项数据发送变化，才会生成新函数，否则一值使用之前的函数
      3. 注意使用场景：
        - 如果函数功能很简单，就没必要缓存了
        - 如果这个函数要传递给其他组件使用，需要缓存
        - 如果这个函数本身功能比较复杂，需要缓存
  */
  const update1 = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const update2 = () => {
    setNum(num + 1);
  };

  const result = <Child update={update1} />;

  console.log(result);

  return (
    <>
      <h1>App</h1>
      <p>{count}</p>
      <p>{num}</p>
      <button onClick={update2}>App update num button</button>
      result
    </>
  );
}

export default App;
